<template>
	<div class="cboard-login">
		<div class="cboard-login-content">
			<div class="cboard-login-box">
				<header class="login-logo"><img src="~@/assets/images/login/logo.png" alt="logo" width="100%" height="100%" /></header>
				<div class="login-title">{{ project_name }}</div>
				<div class="login-view">
					<el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top">
						<el-form-item prop="username">
							<el-input
								v-model="loginForm.username"
								name="username"
								placeholder="请输入用户名/手机号"
								autocomplete="off"
								@keydown.enter.native="clickLogin('loginForm')"
							>
								<i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="loginForm.password" name="password" type="password" placeholder="请输入密码" autocomplete="off">
								<i slot="prefix" class="el-input__icon el-icon-unlock"></i>
								<i slot="suffix" class="el-input__icon el-icon-view"></i>
							</el-input>
						</el-form-item>

						<!-- <el-form-item prop="captureCode">
							<el-row :gutter="20" style="height: 60px;">
								<el-col :span="12" style="height: 100%;"><img :src="captureSrc" alt="logo" width="100%" height="100%" @click="refreshCode" /></el-col>

								<el-col :span="12" style="height: 100%;">
									<el-input v-model="loginForm.captureCode" name="captureCode" placeholder="请输入验证码" autocomplete="off" clearable></el-input>
								</el-col>
							</el-row>
						</el-form-item> -->

						<el-form-item>
							<p class="remember-password flex-justify-end">
								<el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
								<!-- <span @click="onClickTip">忘记密码？</span> -->
							</p>
						</el-form-item>
						<el-form-item>
							<el-button class="login-btn" type="primary" :loading="logging" @click="clickLogin('loginForm')" :disabled="disabledLoginBtn">登&nbsp;录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<!-- <footer>技术支持：{{ jishuzhichi }}</footer> -->
	</div>
</template>
<script>
import { PROJECT_NAME, JISHUZHICHI, BASE_URL } from '@/config/env';
import { login, getToken } from '@/api/index.js';
import { login_key, menu_tree, tabs_route_key } from '@/config/storage-keys';
import MenuConfig from '@/config/menu-config';
export default {
	data() {
		return {
			orgTree: [],
			loginForm: {
				username: '',
				password: ''
			},
			rememberPassword: true,
			loginRules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				]
			},
			logging: false,
			flagNum: 0,
			firstTree: {},
			project_name: PROJECT_NAME,
			jishuzhichi: JISHUZHICHI,
			captureSrc: '',
			disabledLoginBtn: false
		};
	},
	methods: {
		mapTree(org) {
			const haveChildren = Array.isArray(org.children) && org.children.length > 0;
			return {
				id: org.id,
				path: '/custom/innerview/' + org.id,
				label: org.title,
				name: '',
				icon: '',
				children: haveChildren ? org.children.map(i => this.mapTree(i)) : []
			};
		},
		treeFirst(item) {
			const haveChildren = Array.isArray(item.children) && item.children.length > 0;
			if (haveChildren) {
				if (this.flagNum == 0) {
					item.children.map(i => this.treeFirst(i));
				}
			} else {
				this.flagNum++;
				if (this.flagNum == 1) {
					this.firstTree = item;
				}
			}
		},
		clickLogin(loginForm) {
			this.$refs[loginForm].validate(valid => {
				if (valid) {
					this.disabledLoginBtn = true;
					var loginParam = { ...this.loginForm };

					/* if (!this.$Storage.getLocalStorage('login_token')) {
						this.$message({
							type: 'error',
							message: '令牌无效'
						});
						return;
					} */

					// loginParam.token = this.$Storage.getLocalStorage('login_token');

					login(loginParam).then(res => {
						if (res.code === 200) {
							this.$Storage.setLocalStorage(login_key, res.data);
							console.log(res)
							const user = res.data.isAdmin;
							if (user) {
								this.$Storage.setLocalStorage(menu_tree, MenuConfig);
								this.$router.push({path:'/'});
							} 
						} else {
							this.$message({
								type: 'warning',
								message: res.msg
							});
						}
						this.disabledLoginBtn = false;
					});
				} else {
					return false;
				}
			});
		},
		enterKeyupDestroyed() {
			document.removeEventListener('keyup', this.enterKey);
		},
		enterKeyup() {
			document.addEventListener('keyup', this.enterKey);
		},
		enterKey(event) {
			const code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
			if (code == 13) {
				this.clickLogin('loginForm');
			}
		},
		refreshCode() {
			this.captureSrc = BASE_URL + '/base/getCapture?token=' + this.$Storage.getLocalStorage('login_token') + '&ts=' + new Date().getTime();
		}
	},
	created() {
		this.enterKeyup();
		this.$Methods.setDocumentTitle();
	},
	destroyed() {
		this.enterKeyupDestroyed();
	}
};
</script>
